<template>
  <div>
    <h1>{{ "基础用法" }}</h1>
    <commonTreeTransfer
      :treeProps="treeProps"
      :value="value"
      :treeParams="treeParams"
      style="height: 700px"
    >
      <template slot="leftTitle">
        <div>{{ "自定义元素" }}</div>
      </template>
    </commonTreeTransfer>
    <h1>{{ "插槽用法" }}</h1>
    <commonTreeTransfer
      :treeProps="treeProps2"
      :value="value"
      :treeParams="treeParams"
      style="height: 700px"
    >
      <template slot="leftTitle">
        <div>
          {{ "自定义元素" }}
        </div>
      </template>
      <template v-slot:renderTree="{ data, node }">
        <div>{{ data.b + "-" + data.c }}</div>
      </template>
      <template v-slot:rightContent="{ item }">
        <div>{{ item.c || item.label }}</div>
      </template>
    </commonTreeTransfer>
    <h1>懒加载用法</h1>
    <commonTreeTransfer
      :treeProps="treeProps3"
      :value="value3"
      :treeParams="treeParams"
      style="height: 700px"
    >
      <template slot="leftTitle">
        <div>{{ "自定义元素" }}</div>
      </template>
      <template v-slot:renderTree="{ data, node }">
        <div>{{ data.name }}</div>
      </template>
      <template v-slot:rightContent="{ item }">
        <div>{{ item.c || item.label }}</div>
      </template>
    </commonTreeTransfer>
  </div>
</template>

<script>
import commonTreeTransfer from "./index.vue";
export default {
  name: "TreeTransfer",
  components: {
    commonTreeTransfer,
  },
  data() {
    return {
      value: [
        {
          id: 9,
          label: '三级 1-1-1',
          a: "1-1-1",
        },
      ],
      value3: [
        {
          a: "i dont know",
          id: 3 * 10000 + 1,
        },
      ],
      treeProps: {
        data: [
          {
            id: 1,
            label: '一级 1',
            children: [
              {
                id: 4,
                label: '二级 1-1',
                children: [
                  {
                    id: 9,
                    label: '三级 1-1-1',
                  },
                  {
                    id: 10,
                    label: '三级 1-1-2',
                  },
                ],
              },
            ],
          },
          {
            id: 2,
            label: '一级 2',
            children: [
              {
                id: 5,
                label: '二级 2-1',
              },
              {
                id: 6,
                label: '二级 2-2',
              },
            ],
          },
          {
            id: 3,
            label: '一级 3',
            children: [
              {
                id: 7,
                label: '二级 3-1',
              },
              {
                id: 8,
                label: '二级 3-2',
              },
            ],
          },
        ],
      },
      treeParams: {
        label: "a",
        children: "children",
      },
      treeProps2: {},
      treeProps3: {
        lazy: true,
        data: [],
      },
    };
  },
  created() {
    this.init();
    this.treeProps3 = { ...this.treeProps3, lazy: true, load: this.loadNode };
  },
  mounted() {
    this.treeProps = { ...this.treeProps, renderContent: this.renderTree };
    this.treeProps3 = { ...this.treeProps3, lazy: true, load: this.loadNode };
  },
  methods: {
    async init() {
      const res = await getData();
      const res3 = await lazyData();
      this.treeProps = { ...this.treeProps, data: res.rows };
      this.treeProps2 = { data: res.rows };
      this.treeProps3 = { ...this.treeProps3, data: res3.res };
    },
    renderTree(_, { node }) {
      return (
        <div class="custom-tree-node" style="width: 100%;display:flex;">
          <div style="display:flex;font-size: 16px;">
            <div>
              {!!node.childNodes.length && <i class="el-icon-folder"></i>}&nbsp;
            </div>
            <div class="label-box">{node.label}</div>
          </div>
        </div>
      );
    },
    loadNode(node, resolve) {
      if (node.data.id) {
        lazyData(node.data.id).then(({ res }) => resolve(res));
      }
      resolve([]);
    },
  },
};
function getData(currentPage = 1, pageSize = 20) {
  let rows = [];
  const children = [];
  for (let i = 0; i < 5; i++) {
    if (i % 5 == 0) {
      children.push({ a: "child a" + i, id: "child id" + i });
    }
    rows.push({
      a: "aalsdjfalksdjflaksdjfalfjfjfjfjfjfjffffffffffff" + i,
      b: "b" + i,
      c: "c" + i,
      children: i % 5 == 0 ? children : [],
      id: i,
    });
  }
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        rows: rows.slice((currentPage - 1) * pageSize, currentPage * pageSize),
      });
    }, 500);
  });
}

function lazyData(id) {
  const rows = [];
  const children = [];
  if (id) {
    for (let i = 0; i < 3; i++) {
      children.push({
        name: `child${id}-${i}`,
        age: 0,
        id: 10000 * id + i,
      });
    }
  }
  for (let i = 1; i < 13; i++) {
    rows.push({
      name: `name${i}`,
      age: i + 1,
      family: i % 2 == 0,
      id: i,
    });
  }
  return new Promise((resolve) => {
    const res = !id ? rows : children;
    setTimeout(() => {
      resolve({
        res,
      });
    }, 500);
  });
}
</script>

<style scoped></style>
